<template>
    <f7-page ptr @ptr:refresh="refresh" infinite :ptr-distance="$root.ptrDistance" :infinite-distance="50"
        :infinite-preloader="true" @infinite="infinite" class="detail">
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-material="arrow_back" force back></f7-link>
          </f7-nav-left>
          <f7-nav-title>设备使用情况</f7-nav-title>
          <f7-nav-right @click.native="show = true">
                <img src="/static/img/toolbar.svg" alt="toolbar-icon" style="width: 22px;" />
            </f7-nav-right>
        </f7-navbar>
        <!-- 列表内容 -->
        <div class="content">
            <f7-list media-list>
                <f7-list-item v-for="(item, i) in query.data" :key="i"
                    @click="clickItem(item)"
                >
                    <img slot="media"
                        :src="require(`../../../../assets/img/qzjx/${getImg(item)}`)"
                        style="width: 50px;height: 50px;object-fit: contain;"
                    />
                    <div slot="title">
                        <div class="propertyCode">{{ item.propertyCode }}</div>
                        <section>
                            <img
                                v-for="(citem,cindex) in item.cranebox"
                                :key="cindex+'craneBox'"
                                :class="['blackBox',citem.state==1?'online':'']"
                                src="../../../../assets/img/qzjx/statistics/blackBox.svg"
                            >
                            <img
                                v-for="(citem,cindex) in item.driverroom"
                                :key="cindex+'driverRoom'"
                                :class="[citem.state==1?'online':'']"
                                src="../../../../assets/img/qzjx/statistics/camera.svg"
                            >
                        </section>
                    </div>
                    <span slot="subtitle">
                        <div>用于工程：{{ item.engineeName || '--' }}</div>
                        <!-- <div>黑匣子数量：
                          <div class="qm-tag">
                                在线{{ item.onLineCount }}台
                            </div>
                            <div class="qm-tag">
                                离线{{ item.offLineCount }}台
                            </div>
                        </div>
                        <div>司机室数量：
                            <div class="qm-tag">
                                在线{{ item.onLineSjsCount }}台
                            </div>
                            <div class="qm-tag">
                                离线{{ item.offLineSjsCount }}台
                            </div>
                        </div> -->
                    </span>
                </f7-list-item>
            </f7-list>
            <van-empty description="暂无数据" v-if="!query.data.length" />
        </div>

        <!-- 弹出面板 -->
        <van-popup v-model="show" position="bottom" get-container="body" class="qm-popup"
            style="height: 80%;border-radius: 12px 12px 1px 1px;" close-icon="/static/img/icon_close.svg" :closeable="true">
            <div class="qm-popup-content">
                <!-- 标题 -->
                <div class="popup-title">筛选</div>
                <!-- 检索框 -->
                <van-search v-model="search.keyword" placeholder="起重机备案号/工程名" left-icon="/static/img/search.svg" />
                <!-- 参数选择 -->
                <div class="param-box">
                    <div class="param-item">
                        <div class="param-title">设备类型</div>
                        <div class="param-list">
                            <div v-for="(item, i) in typeList" :key="i+'a'">
                                <div class="param-radio" :class="{ 'is-active': search.equipmentType == item.value }"
                                    @click="handleTypeClick(item,'equipmentType')">
                                    {{ item.key }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="param-item">
                        <div class="param-title">设备接入</div>
                        <div class="param-list">
                            <div v-for="(item, i) in statusList1" :key="i+'b'" @click="handleTypeClick(item,'useStatus')">
                                <div class="param-radio" :class="{ 'is-active': search.useStatus === item.value }">
                                    {{ item.key }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="param-item">
                        <div class="param-title">设备状态</div>
                        <div class="param-list">
                            <div v-for="(item, i) in statusList" :key="i+'c'">
                                <div class="param-radio" :class="{ 'is-active': search.isAccessTerminal == item.value }"
                                    @click="handleTypeClick(item,'isAccessTerminal')">
                                    {{ item.key }}
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    <div class="param-item">-->
<!--                        <div class="param-title">司机室监控</div>-->
<!--                        <div class="param-list">-->
<!--                            <div v-for="(item, i) in cameraStatus" :key="i">-->
<!--                                <div class="param-radio" :class="{ 'is-active': search.cameraStatus == item.value }"-->
<!--                                    @click="search.cameraStatus = item.value">-->
<!--                                    {{ item.key }}-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="param-item">-->
<!--                        <div class="param-title">黑匣子注册时间</div>-->
<!--                        <div class="date-time-picker">-->
<!--                            <div class="start" @click="() => showDatePicker('startTime')">-->
<!--                                {{ search.startTime || "开始时间" }}-->
<!--                            </div>-->
<!--                            <span class="join-text">至</span>-->
<!--                            <div class="end" @click="() => showDatePicker('endTime')">-->
<!--                                {{ search.endTime || "结束时间" }}-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
                <!-- 按钮 -->
                <div class="btn-box">
                    <van-row gutter="12">
                        <van-col span="8">
                            <van-button round text="重置" class="reset" @click="cancel" />
                        </van-col>
                        <van-col span="16">
                            <van-button round text="确定" @click="submit" />
                        </van-col>
                    </van-row>
                </div>
            </div>
        </van-popup>
        <!-- 日期选择 -->
        <van-popup v-model="date.show" position="bottom" get-container="body">
            <van-datetime-picker v-model="date.current" type="date" title="选择时间" @confirm="confirmDate"
                @cancel="cancelDate">
            </van-datetime-picker>
        </van-popup>
    </f7-page>
</template>

<script>
import Controller from "@/libs/framework/controller";
export default class index extends Controller {
    disableCache () {
        return true;
    }
    onBeforeInit () {
        this.urls = {
            query: "/statistics/crane/queryList"
        };
    }
    onInit () {
        this.context.search={
            propertyStatus: '5,6'
        }
        this.context.date.startTime = null;
        this.context.date.endTime = null;
        let params=this.$f7route.query
        for (let item in params) {
            if (item) {
                this.vm.$set(this.context.search,item,params[item])
                // this.context.search[item] = this.$params[item]
            }
        }
    }
    mixin () {
        return {
            data () {
                return {
                    // 筛选项显示
                    show: false,
                    query: {
                        data: [
                            // {
                            //     propertyCode: "粤A-A32672",
                            //     engineeName: "测试工程测试工程测试工程测试工程测试工程测试工程测试工程",
                            //     craneType: 'crane_type_2',
                            //     craneTypeName: '施工升降机',
                            //     onLineCount: 0,
                            //     offLineCount: 0,
                            //     onLineSjsCount: 0,
                            //     offLineSjsCount:0
                            // }
                        ],
                    },
                    typeList: [
                        {
                            key: '塔式起重机',
                            value: "TSQZJ"
                        },
                        {
                            key: '施工升降机',
                            value: "SGSJJ"
                        },
                        {
                            key: '门式起重机',
                            value: "MSQZJ"
                        },
                        {
                            key: '桥式起重机',
                            value: "QSQZJ"
                        },
                        /*{
                            key: '其它',
                            value: "other"
                        }*/
                    ],
                    statusList: [
                        {
                            key: '在线',
                            value: '1'
                        },
                        {
                            key: '离线',
                            value: '0'
                        }
                    ],
                    statusList1: [
                        {
                            key: '已接入',
                            value: '1'
                        },
                        {
                            key: '未接入',
                            value: '0'
                        }
                    ],
                    cameraStatus: [
                        {
                            key: '已接入',
                            value: '1'
                        },
                        {
                            key: '未接入',
                            value: '0'
                        }
                    ],
                    search: {
                        code: '',
                        type: "",
                        status: "",
                        status1: "",
                        // cameraStatus: "",
                        // startTime: "",
                        // endTime: ""
                    },
                    // 时间选择面板
                    date: {
                        prop: "",
                        show: false,
                        current: null,
                        startTime: null,
                        endTime: null
                    },
                    tsImg: '../../../../assets/img/qzjx/TSQZJ.png',
                    sgImg: '../../../../assets/img/qzjx/SGSJJ.png',
                    noImg: '../../../../assets/img/qzjx/noimage.svg'
                };
            },
            watch: {
                "date.startTime" (v) {
                    this.search.startTime = this.formatDate(v);
                },
                "date.endTime" (v) {
                    this.search.endTime = this.formatDate(v);
                },
                search(val){
                    console.log('search--',val);
                }
            },
            created () {

            },
            methods: {
                handleTypeClick(item,field){
                    // search.equipmentType = item.value
                    this.$set(this.search,field,item.value)
                },
                clickItem(item){
                    if(item.equipmentType != 'TSQZJ' && item.equipmentType != 'SGSJJ'){
                        return this.$f7.dialog.toast('该设备类型不支持查看实时监控！')
                    }
                    if(item.cranebox.length === 0 && item.driverroom.length === 0){
                        return this.$f7.dialog.toast('该设备暂未接入黑匣子与司机室监控！')
                    }
                    const { propertyCode } = item
                    const craneLength = item.cranebox.length
                    let equeId = ''
                    if (craneLength) {
                        equeId = item.cranebox[craneLength - 1].equeId
                    }
                    this.$f7router.navigate(`/business/qzjx/hoisting/index?equipmentType=${item.equipmentType}&propertyCode=${propertyCode}&equeId=${equeId}`)
                },
                cancel () {
                    for (let key in this.search) {
                        this.search[key] = "";
                    }
                    this.date.startTime = null;
                    this.date.endTime = null;
                    this.show = false;
                    this.searchQuery();
                },
                // 确定
                submit () {
                    this.show = false;
                    this.searchQuery();
                },
                /* 选择日期 */
                showDatePicker (prop) {
                    if (!prop) return;
                    this.date.prop = prop;
                    this.date.current = this.date[prop];
                    this.date.show = true;
                },
                confirmDate (value) {
                    this.date[this.date.prop] = value;
                    this.cancelDate();
                },
                cancelDate () {
                    this.date.prop = "";
                    this.date.current = "";
                    this.date.show = false;
                },
                // 格式化时间
                formatDate (date, fmt = "yyyy-MM-dd") {
                    let result = fmt;
                    let o = {
                        "y+": date.getFullYear(),
                        "M+": date.getMonth() + 1, //月份
                        "d+": date.getDate(), //日
                        "h+": date.getHours(), //小时
                        "m+": date.getMinutes(), //分
                        "s+": date.getSeconds() //秒
                    };

                    for (let k in o) {
                        if (new RegExp("(" + k + ")").test(fmt)) {
                            result = result.replace(new RegExp("(" + k + ")"), o[k]);
                        }
                    }

                    return result !== fmt ? result : "";
                },
                // 图片
                getImg (item) {
                    if(item.equipmentType){
                        return item.equipmentType+'.png'
                    }else{
                        return 'noimage.svg'
                    }
                }
            },

        };
    }
}
</script>

<style scoped lang="less">
@import url('../../../../assets/css/commonPage.less');
.content {
    .media-list {
        --f7-list-media-item-padding-vertical: 15px;
        --f7-list-media-item-padding-horizontal: 15px;
        margin-top: 0!important;
        /deep/ul {
            background-color: transparent;
        }

        /deep/.item-link .item-inner {
            padding-right: 10px;
        }
    }

    // 列表项
    .media-item {
        margin-bottom: 10px;
        background: #ffffff;
        box-shadow: 0px 4px 18px 0px rgba(16, 67, 136, 0.1);
        border-radius: 8px;

        &:last-child {
            margin-bottom: 0;
        }
        /deep/.item-content{
            align-items: flex-start;
        }

        /deep/.item-media {
            align-self: unset;
        }

        // 标题
        /deep/.item-title {
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            line-height: 23px;
            width: 100%;

            >div {
                display: flex;
                justify-content: space-between;
            }
            .propertyCode{
                color: #242424;
                font-size: 17px;
                font-weight: 600;
            }
            section{
                img{
                    width: 20px;
                    height: 20px;
                    &.online{
                        filter: drop-shadow(#25C670 99999px 0);
                        transform: translateX(-99999px);
                    }
                    &.blackBox{
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }

        // 副标题
        /deep/.item-subtitle {
            font-size: 13px;
            color: #8995AC;
            line-height: 20px;
            white-space: normal;
            margin-top: 6px;
        }

        // 标签
        .qm-tag {
            margin-right: 6px;
            display: inline-block;
            padding: 2px 6px;
            font-size: 13px;
            color: var(--color, #61677A);
            line-height: 19px;
            background-color: var(--bg-color, rgba(137, 149, 172, .1));
            border-radius: 4px;

            &:last-child {
                margin-right: 0;
            }
        }
    }
}

.qm-fix {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 19px;
    bottom: 130px;
    width: 50px;
    height: 50px;
    font-size: 14px;
    color: #ffffff;
    line-height: 15px;
    background: linear-gradient(180deg, #58aefe 0%, #3d83fa 100%);
    box-shadow: 0px 6px 10px 0px rgba(5, 24, 66, 0.2);
    border-radius: 50%;
}

// 弹出层
.qm-popup {
    .qm-popup-content {
        padding: 20px 16px 0 16px;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;

        .popup-title {
            flex: 0 0 auto;
            margin-bottom: 20px;
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            line-height: 23px;
            text-align: center;
        }
    }

    // 弹出框关闭按钮
    /deep/.van-popup__close-icon {
        top: 20px;

        img {
            width: 15px;
        }
    }

    // 搜索框
    .van-search {
        flex: 0 0 auto;
        padding: 0;
        height: 36px;

        /deep/.van-search__content {
            background-color: #f5f7fa;
            border-radius: 18px;

            .van-field__left-icon {
                display: flex;
                align-items: center;
            }

            input {
                &::placeholder {
                    font-size: 14px;
                    color: #61677a;
                    line-height: 20px;
                }
            }
        }
    }

    // 参数
    .param-box {
        flex: 1;
        margin: 0 -16px;
        padding: 0 16px;
        overflow: auto;

        .param-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 12px 15px;
        }

        .param-item {
            margin-top: 30px;

            .param-title {
                margin-bottom: 15px;
                font-size: 16px;
                font-weight: 500;
                color: #333333;
                line-height: 23px;
            }

            // 单选
            .param-radio {
                padding: 8px 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                height: 100%;
                background: #f5f7fa;
                border-radius: 4px;
                word-wrap: break-all;
                box-sizing: border-box;

                &.is-active {
                    color: #3b7ffa;
                    background: rgba(51, 133, 255, 0.08);
                }
            }

            .van-row {
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            // 日期范围选择
            .date-time-picker {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #333333;

                .join-text {
                    flex: 0 0 auto;
                    margin: 0 15px;
                    font-size: 14px;
                    line-height: 20px;
                }

                .start,
                .end {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 40px;
                    font-size: 14px;
                    background: #f5f7fa;
                    border-radius: 4px;
                    color: #b5bcca;
                }
            }
        }
    }

    // 按钮
    .btn-box {
        flex: 0 0 auto;
        margin-top: 30px;
        padding: 15px 0;

        .van-button {
            height: 48px;
            font-size: 18px;
            color: #fff;
            background-color: #3b7ffa;
            border: none;

            &.reset {
                color: #3b7ffa;
                background-color: rgba(59, 127, 250, 0.14);
                border: 2px solid #e3e5e9;
            }
        }
    }
}
</style>
